<template>
  <a-card style="padding: 180px 0px;">
    <a-row type="flex" justify="center" align="middle">
      <a-col span="15">
        <a-input-group compact>
          <a-select :defaultValue="defaultValue" @change="typeHandleChange" :value="typeValue">
              <a-select-option :value="index + 1" v-for="(item, index) in typeList" :key="index">{{ item }}</a-select-option>
          </a-select>
          <a-select
            :filterOption="false"
            :showArrow="false"
            :placeholder="placeHolderText"
            :value="value"
            mode="multiple"
            labelInValue
            style="width: 76%"
            :notFoundContent="fetching ? undefined : null"
            @search="searchUsers"
            @select="selectValues"
          >
            <a-spin v-if="fetching" slot="notFoundContent" size="small"/>
            <a-select-option v-for="d in data" :key="d.value">{{d.text}}</a-select-option>
          </a-select>
          <a-button type="primary" @click="fetchUser" v-if="typeValue == '房屋' || typeValue == 1">选择房屋</a-button>
          <a-modal
            title="选择房屋"
            :visible="visible"
            @ok="handleOk"
            @cancel="handleCancel"
          >
            <a-row>
              <a-form>
                <a-form-item label="选择小区" :label-col="labelCol" :wrapper-col="wrapperCol">
                    <a-cascader :options="options" @change="onChange" placeholder="请选择房屋" />
                </a-form-item>
              </a-form>
            </a-row>
          </a-modal>
        </a-input-group>
      </a-col>
    </a-row>
  </a-card>
</template>

<script>
import { search_info, getCashierHouse } from '@/api/cashier'
import { mapGetters } from 'vuex'
const optionsText = [
    '搜索说明：输入房号即可快速搜索',
    '搜索说明：输入车牌即可快速搜索',
    '搜索说明：输入车位号即可快速搜索',
    '搜索说明：输入姓名，手机，即可快速搜索'
]
const typeList = ['房屋', '车辆', '车位', '住户']
export default {
    name: 'charge_cashier_index',
    data() {
        return {
            typeList,
            placeHolderText: optionsText[0],
            data: [],
            value: [],
            fetching: false,
            defaultValue: 1,
            typeValue: '房屋',
            description: '可搜索房屋、车位、车辆、住户相关未缴费用账单，完成账单收款。',
            visible: false,
            labelCol: {
                xs: { span: 24 },
                sm: { span: 6 }
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 15 }
            },
            options: [],
            userCheckId: null
        }
    },
    async mounted() {
        console.log(this.typeValue)
        this.getHouse()
    },
    methods: {
        ...mapGetters(['token', 'pmsArId', 'nowMg']),
        onSearch() {},
        typeHandleChange(value) {
            this.placeHolderText = optionsText[value - 1]
            this.typeValue = value
            this.data = []
        },
        fetchUser() {
            this.visible = true
        },
        searchUsers(value) {
            this.fetching = true
            this.data = []
            if(value !== '') {
                search_info({type: typeof this.typeValue == 'string' ? 1 : this.typeValue, value,token:this.token()}).then(res => {
                    this.data = res.data
                    this.fetching = false
                    console.log(res)
                }).catch(err => {
                    console.log(err)
                })
            }
        },
        selectValues(value) {
            switch (parseInt(this.typeValue)) {
                case 1:
                    // todo 搜索房屋
                    this.$router.push({ name: 'charge_cashier_houseDetail', params: {house_id: value.key}})
                    break
                case 2:
                    // todo 搜索车辆
                    this.$router.push({ name: 'charge_cashier_carDetail' , params: {house_id: value.key}})
                    break
                case 3:
                    // todo 搜索车位
                    this.$router.push({ name: 'charge_cashier_carAreaDetail' , params: {house_id: value.key}})
                    break
                case 4:
                    // todo 搜索住户
                    this.$router.push({ name: 'charge_cashier_houseUserDetail' , params: {house_id: value.key}})
                    break
                default:
                    if (this.typeValue == '房屋') this.$router.push({ name: 'charge_cashier_houseDetail' , params: {house_id: value.key}})
            }
        },
        handleCancel() {
            this.visible = false
        },
        onChange(value) {
            this.userCheckId = value
        },
        getHouse() {
            getCashierHouse({token:this.token()}).then(res => {
                this.options = res.data
            }).catch(err => {
                console.log(err)
            })
        },
        handleOk() {
            if(this.userCheckId.length < 4) {
                this.$message.error('请选择到住户')
            } else {
                this.$router.push({ name: 'charge_cashier_houseDetail', params: {house_id: this.userCheckId[this.userCheckId.length - 1]}})
            }
        }
    }
}
</script>

<style scoped>
</style>